<template>
  <div id="Footer">
    <div class="footer-title">
      <div class="left">
        <router-link tag="a" :to="{name:'homeLink'}">
          <i class="fa fa-chrome"></i>
          {{title}}
         </router-link>
      </div>
     
      <div class="right">
        <i class="fa fa-phone" aria-hidden="true"></i>400-123-123
      </div>
    </div>
    <div class="mark">
      <p>必胜客宅急送不同城市或不同餐厅的送餐菜单和价格有所不同。 不同时段产品品项及价格有所不同。工作日特惠午餐及下午茶产品只在部分时段供应。详情以输入送餐地址后显示的实际供应的菜单为准。</p>
      </div>
    <div class="footerNav-one">
      <ul class='left'>
        <li class='first'>
          <a href="#">当季特选</a>
        </li>
        <li></li>
        <li>
          <a href="#">优惠套餐</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">比萨</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">意面</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">饭食</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">米线</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">小吃</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">饮料</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">汤</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">沙拉和鲜蔬</a>
        </li>
        <li>|</li>
        <li>
          <a href="#">甜点</a>
        </li>
       </ul>
        <ul class='right'>
        <li><a href="#">会员中心</a></li>
        <li>
          <a href="#">帮助中心</a>
        </li>
      </ul>
    </div>
    <div class="copyright">
      <div class="footerNav">
        <div class="left yum-name">
          <a href="#">版权所有 百胜咨询（上海）有限公司</a>
        </div>
        <ul class='left'>
          <li></li>
          <li>
            <a href="#">必胜客会员服务协议</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">用户协议</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">隐私政策</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">法律条款</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">经营公示</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">联系我们</a>
          </li>
          <li>|</li>
          <li>
            <a href="#">加入我们</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="footerNav">
      <p>沪ICP备 17029211-1号</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pizza点餐系统",
  data() {
    return {
      title: "Pizza点餐系统"
    };
  }
};
</script>

<style>

#Footer {
  position:relative;
  width: 100%;
}
 
.footer-title,
.footer-title a{
  color:#000;
  width:70%;
  height: 50px;
  font-size: 24px;
  font-weight:bold;
  margin: 0 auto;
  margin-top:30px;
}



#Footer .mark {
  width:70%;
  font-size: 12px;
  background-color: white;
    color:#666666;
      margin:0 auto;
}
#Footer .mark p{
  line-height: 20px;
  margin-bottom:10px;
}
.footerNav-one {
  width: 70%;
  height:14px;
  color:#666666;
  font-size:12px;
  line-height: 14px;
  font-weight:bold;
  margin:0 auto;
}


.footerNav-one a{
  color:#666666;
}
.footerNav-one .right{
  font-size:14px;
}

.footerNav-one li {
  float: left;
  margin: 0 5px;
}
.footerNav-one .first{
  font-size:14px;
  margin-left:0px;
  margin-right:30px;
}





.footerNav {
  width: 70%;
  height:40px;
  color:#666666;
  font-size:12px;
  line-height: 40px;
  font-weight:bold;
  margin:0 auto;
}


.footerNav a{
  color:#666666;
}
.footerNav .right{
  font-size:14px;
}


.footerNav ul {
  display:box;
  height:30px;
}
.footerNav li {
  float: left;
  margin: 0 5px;
}
.footerNav p{
  font-size:12px;
  text-align:right;
}



.copyright{
    background-color:#e5e6e1;
}

.copyright .yum-name{
  margin-right:20px;
}
</style>
